<template>
    <div v-if="nowRouteMatched.length >= 1" class="page_title">
      <left-outlined v-if="nowRouteMatched.length >= 2" class="icon_class" @click="toLastPage" />
      <span>{{ nowRouteMatched[nowRouteMatched.length - 1].meta.title }}</span>
    </div>
  </template>
  <script setup lang="ts">
  import { useRoute } from "vue-router";
  import { ref, watch, watchEffect } from "vue";
  import { LeftOutlined } from "@ant-design/icons-vue";
  import { useRouter } from "vue-router";
  const route = useRoute();
  const router = useRouter();
  const nowRouteMatched = ref<any>([]);
  const toLastPage = () => {
    router.go(-1);
  };
  watchEffect(() => {
    nowRouteMatched.value = route.matched;
  });
  </script>
  <style lang="scss" scoped>
  .page_title {
    margin-top: 16px;
    display: flex;
    align-items: center;
    @include set_font_color($title_color);
    @include set_font_size($title_font_size);
    @include set_line_height($title_font_size);
  
    .icon_class {
      margin-right: 12px;
      cursor: pointer;
      @include set_font_color($title_color);
      @include set_font_size($left_icon_font_size);
    }
  }
  </style>
  